<template>
    <div class="xiangq">
           <!-- <h4>详情</h4> -->
           <van-nav-bar
               title="详情"
              left-text="返回"
               left-arrow
              @click-left="onClickLeft"
             
              />
              <div class="top" :style="{backgroundImage:'url(' + (shopinfo.info && shopinfo.info.poi_back_pic_url) +')' }">
                   <img :src="shopinfo.info.picUrl" alt="">
                  <span>{{shopinfo.info.name}}</span>
                 
                  <span class="xing" v-if="isCollect" @click="$store.commit('cancel_collect',shopinfo.info)" style="color:red" >❤</span>

                  <span class="xing" v-else @click="$store.commit('collect',shopinfo.info)">❤</span>
              </div>
              <div class="box">
 <div class="left">
<van-sidebar v-model="activeKey"  >
  <van-sidebar-item  v-for="(item,index) in shopinfo.taglist" :key="index" :title=" item.name" />      
</van-sidebar>
        </div>


        <div class="right">
            <div class="good" v-for="(item,index) in shopinfo.taglist[activeKey].goodlist" :key="index">
                 <div><img :src="item.picture" alt=""></div>
                 <div>
                      <span class="name">{{item.name}}</span>
               
                <span class="month">月售{{item.month_saled}}</span>
                 </div>
               
            </div>
        </div>


              </div>
       


    </div>
      
</template>

<script>
import {shop_shopinfo} from '../../utils/api'
import { Dialog } from 'vant';

import { Toast } from 'vant';

// import { NavBar } from 'vant';
export default {

    data(){
        return{
            activeKey: 0,
            shopinfo:{}
        }
    },
    mounted(){

        // 请求后端数据
        shop_shopinfo({id:this.$route.params.id}).then((res)=>{
            if(res.data.shopinfo){
                this.shopinfo = res.data.shopinfo
                //  console.log(res.data.shopinfo)
            }else{
                Dialog.alert({
          title: '提示',
          message: '该店铺已倒闭!'
        }).then(() => {
          this.$router.go(-1);
        });
      
            }
            
           
            // console.log(this.$store.state)
        })
        
    },
    computed:{
         isCollect(){
             var index = this.$store.state.collectlist.findIndex((item)=>{
                return item.mtWmPoiId == this.shopinfo.mtWmPoiId;
             })
             return index !== -1;
         }
    },
    methods:{
        onClickLeft(){
            Toast(this.$router.go(-1))
        }
    }

}
</script>

<style lang="scss" scoped>
   .top {
      width: 100%;
      height: 100px;
     line-height: 100px;
     text-align: center;
       
    
    
    
    img{
       width: 40px;
       border-radius:10px ;
       vertical-align: middle;
       margin-right: 10px;
   }

}
.box{
    display: flex;
}
.right .good img{
    width: 100px;
    vertical-align: middle;
}
.good{
    display: flex;
    margin: 20px 0;
    height: 100px;
    .name{
        display: block;
        margin-bottom: 20px;
        color: red;
    }
}
</style>